<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>车位预约</title>
    <link href="../Public/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        /*基础样式*/
        * {
            font-family: "微软雅黑", "宋体", Arial;
        }
        p, h1, h2, h3, h4, h5, h6 {
            padding: 0;
            margin: 0;
        }
        body, html,#container,#allmap{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
            min-width: 320px;
        }
        #header {
            background: white;
            height: 50px;
            margin: 0;
            z-index: 999;
        }
        /*搜索栏*/
        #search{
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 5px 5px 5px 10px;
            box-shadow: 1.5px 1.5px 1.5px 1.5px #888888;
            background: rgba(12, 175, 213, 0.82);
        }
        #submit{
            position: absolute;
            top: 5px;
            right: 38px;
            z-index: 1000;
            color: white;
        }
        .input-group{
            padding: 5px 0;
            position: relative;
        }
        .input-group input{
            background: rgba(255,255,255,0);
            border-radius: 4px!important;
            color: black;
        }
        .input-group input:focus{
            background: rgb(125, 201, 228);
        }
        .input-group input::-webkit-input-placeholder{
            color: white;
        }
        .input-item {
            height: 30px;
            border: none;
            background: none;
            box-shadow: none;
        }
        .input-item button{
            color: white!important;
            outline: none!important;
            box-shadow: none!important;
        }
        /*地图信息框*/
        #scontent{
            width: 250px;
        }
        #scontent img{
            width: 72px;
            height: 72px;
        }
        #scontent button{
            width: 100%;
            margin-top: 10px;
            font-size: 0.5em;
            color: white;
            background: rgba(12, 175, 213, 0.82);
        }
        /*侧边栏*/
        #modal{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
            overflow: hidden;
            z-index: 1000;
        }
        #modal-dialog {
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            opacity: 0;
        }
        #modal-dialog span{
            width: 100%;
            height: 50px;
            position: absolute;
            top: -50px;
            left: 0;;
        }
        #modal-content {
            background: white;
            position: absolute;
            top: 50px;
            bottom: 0;
            border-left: 2px solid rgba(12, 175, 213, 0.82);
        }
        /*个人信息*/
        #user-info{
            width: 100%;
            height: 80px;
            background: rgba(12, 175, 213, 0.82);
            display: block;
        }
        .img{
            width: 100px;
            height: 100%;
            float: left;
            padding: 5px 15px;

        }
        .img .img-circle{
            width: 100%;
            height: 100%;
            border: 3px solid #8ec7e4;
        }
        .info{
            height: 100%;
            float: left;
            color: white;
            padding: 15px 0;
        }
        #user-info h4{
            margin-top: 5px;
            height: 40px;
        }
        #user-info:hover{
            background: rgba(12, 194, 232, 0.82);
        }
        #location{
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            color: white;
            background: rgba(12, 175, 213, 0.82);
            display:block;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            font-size: 0.8em;
            border-top: 1px solid rgb(11, 172, 205);
            text-decoration: none;
        }
        #location:hover{
            background: rgba(12, 194, 232, 0.82);
        }
        /*停车场列表*/
        #content{
            width: 100%;
            overflow: auto;
            position: absolute;
            top: 110px;
            left: 0;
            bottom: 0;
        }
        .group{
            height: 100px;
            border-bottom: 1px solid #cccccc;
        }
        .group-item{
            display: inline-block;
            float: left;
        }
        .group-logo{
            width: 80px;
            height: 80px;
            margin: 10px;
            position: relative;
        }
        .group-logo span{
            width: 0;
            height: 0;
            border-top: 30px solid rgba(12, 175, 213, 0.82);
            border-left: 30px solid transparent;
            position: absolute;
            top: 0px;
            left: 50px;
        }
        .group-logo img{
            width: 100%;
            height: 100%;
            border: 2px solid rgba(12, 175, 213, 0.82);
        }
        .group-logo h6{
            position: absolute;
            top: 2px;
            left: 65px;
            color: white;
        }
        .group-text{
            width: calc(100% - 100px);
            height: 100%;
            color: black;
            padding: 10px 10px 10px 0;
        }
    </style>
</head>
<body>
<header id="header" class="navbar navbar-fixed-top">
    <form id="search" class="form-horizontal" action="#" enctype="multipart/form-data" method="post">
        <div class="input-group">
            <input class="form-control input-item" type="text" name="keywords" placeholder="输入搜索关键词">
            <div class="input-group-btn input-item" id="sidebar">
                <button class="btn input-item" type="button">
                    <span class="glyphicon glyphicon-align-justify"></span>
                </button>
            </div>
            <button id="submit" class="btn input-item" type="submit">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </div>
    </form>
</header>
<div class="container-fluid" id="container">
    <div id="allmap"></div>
    <div id="modal">
        <div id="modal-dialog">
            <span></span>
        </div>
        <div id="modal-content">
            <a href="mind.html" id="user-info">
                <div class="img">
                    <img class="img-circle" src="../Public/img/test.jpg">
                </div>
                <div class="info">
                    <h4>月夜凝光</h4>
                    <h6>信誉度:999</h6>
                </div>
            </a>
            <a href="#" id="location"><span class="glyphicon glyphicon-map-marker" style="margin-right: 5px;"></span>北京理工大学珠海学院<span class="glyphicon glyphicon-menu-right" style="float: right;height: 26px;line-height: 26px;"></span></a>
            <div id="content">
                <div class="group">
                    <a href="#">
                        <div class="group-item group-logo">
                            <img src="../Public/img/temp.jpg">
                            <span></span>
                            <h6>闲</h6>
                        </div>
                        <div class="group-item group-text">
                            <h4 style="height: 65px;">迎宾广场停车场<br/><span style="font-size: 12px;">珠海市香洲区迎宾南路1144号</span></h4>
                            <h6 class="text-right">
                                <span style="margin-right: 5px;">5元/时</span>
                                <span style="margin-right: 5px;">800米</span>
                                <span style="margin-right: 5px;">1630次</span>
                            </h6>
                        </div>
                    </a>
                </div>
                <div class="group">
                    <a href="#">
                        <div class="group-item group-logo">
                            <img src="../Public/img/temp.jpg">
                            <span></span>
                            <h6>闲</h6>
                        </div>
                        <div class="group-item group-text">
                            <h4 style="height: 65px;">迎宾广场停车场<br/><span style="font-size: 12px;">珠海市香洲区迎宾南路1144号</span></h4>
                            <h6 class="text-right">
                                <span style="margin-right: 5px;">5元/时</span>
                                <span style="margin-right: 5px;">800米</span>
                                <span style="margin-right: 5px;">1630次</span>
                            </h6>
                        </div>
                    </a>
                </div>
                <div class="group">
                    <a href="#">
                        <div class="group-item group-logo">
                            <img src="../Public/img/temp.jpg">
                            <span></span>
                            <h6>闲</h6>
                        </div>
                        <div class="group-item group-text">
                            <h4 style="height: 65px;">迎宾广场停车场<br/><span style="font-size: 12px;">珠海市香洲区迎宾南路1144号</span></h4>
                            <h6 class="text-right">
                                <span style="margin-right: 5px;">5元/时</span>
                                <span style="margin-right: 5px;">800米</span>
                                <span style="margin-right: 5px;">1630次</span>
                            </h6>
                        </div>
                    </a>
                </div>
                <div class="group">
                    <a href="#">
                        <div class="group-item group-logo">
                            <img src="../Public/img/temp.jpg">
                            <span></span>
                            <h6>闲</h6>
                        </div>
                        <div class="group-item group-text">
                            <h4 style="height: 65px;">迎宾广场停车场<br/><span style="font-size: 12px;">珠海市香洲区迎宾南路1144号</span></h4>
                            <h6 class="text-right">
                                <span style="margin-right: 5px;">5元/时</span>
                                <span style="margin-right: 5px;">800米</span>
                                <span style="margin-right: 5px;">1630次</span>
                            </h6>
                        </div>
                    </a>
                </div>
                <div class="group">
                    <a href="#">
                        <div class="group-item group-logo">
                            <img src="../Public/img/temp.jpg">
                            <span></span>
                            <h6>闲</h6>
                        </div>
                        <div class="group-item group-text">
                            <h4 style="height: 65px;">迎宾广场停车场<br/><span style="font-size: 12px;">珠海市香洲区迎宾南路1144号</span></h4>
                            <h6 class="text-right">
                                <span style="margin-right: 5px;">5元/时</span>
                                <span style="margin-right: 5px;">800米</span>
                                <span style="margin-right: 5px;">1630次</span>
                            </h6>
                        </div>
                    </a>
                </div>
                <div class="group">
                    <a href="#">
                        <div class="group-item group-logo">
                            <img src="../Public/img/temp.jpg">
                            <span></span>
                            <h6>闲</h6>
                        </div>
                        <div class="group-item group-text">
                            <h4 style="height: 65px;">迎宾广场停车场<br/><span style="font-size: 12px;">珠海市香洲区迎宾南路1144号</span></h4>
                            <h6 class="text-right">
                                <span style="margin-right: 5px;">5元/时</span>
                                <span style="margin-right: 5px;">800米</span>
                                <span style="margin-right: 5px;">1630次</span>
                            </h6>
                        </div>
                    </a>
                </div>
                <div class="group">
                    <a href="#">
                        <div class="group-item group-logo">
                            <img src="../Public/img/temp.jpg">
                            <span></span>
                            <h6>闲</h6>
                        </div>
                        <div class="group-item group-text">
                            <h4 style="height: 65px;">迎宾广场停车场<br/><span style="font-size: 12px;">珠海市香洲区迎宾南路1144号</span></h4>
                            <h6 class="text-right">
                                <span style="margin-right: 5px;">5元/时</span>
                                <span style="margin-right: 5px;">800米</span>
                                <span style="margin-right: 5px;">1630次</span>
                            </h6>
                        </div>
                    </a>
                </div>
                <div class="group">
                    <a href="#">
                        <div class="group-item group-logo">
                            <img src="../Public/img/temp.jpg">
                            <span></span>
                            <h6>闲</h6>
                        </div>
                        <div class="group-item group-text">
                            <h4 style="height: 65px;">迎宾广场停车场<br/><span style="font-size: 12px;">珠海市香洲区迎宾南路1144号</span></h4>
                            <h6 class="text-right">
                                <span style="margin-right: 5px;">5元/时</span>
                                <span style="margin-right: 5px;">800米</span>
                                <span style="margin-right: 5px;">1630次</span>
                            </h6>
                        </div>
                    </a>
                </div>
                <div class="group">
                    <a href="#">
                        <div class="group-item group-logo">
                            <img src="../Public/img/temp.jpg">
                            <span></span>
                            <h6>闲</h6>
                        </div>
                        <div class="group-item group-text">
                            <h4 style="height: 65px;">迎宾广场停车场<br/><span style="font-size: 12px;">珠海市香洲区迎宾南路1144号</span></h4>
                            <h6 class="text-right">
                                <span style="margin-right: 5px;">5元/时</span>
                                <span style="margin-right: 5px;">800米</span>
                                <span style="margin-right: 5px;">1630次</span>
                            </h6>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="../Public/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../Public/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=OWHeZN448651PTZxqwM2785x"></script>
<script type="text/javascript">
    <!-- 侧边菜单-->
    init();

    var modal_width;
    $("#sidebar").click(function () {
        $("#modal").show();
        $("#modal-dialog").animate({opacity: '1'}, 300);
        $("#modal-content").animate({right : "0"});
    });
    $("#modal-dialog").click(function () {
        $("#modal-dialog").animate({opacity: '0'}, 300);
        $("#modal-content").animate({right : -(modal_width)},300);
        setTimeout(function () {
            $("#modal").hide();
        }, 300);
    });
    $(window).resize(function(){
        init();
    });

    function init(){
        var window_width = $(window).width();
        if(window_width > 700){
            modal_width = $(window).width() * 0.45;
        }else{
            modal_width = $(window).width() * 0.80;
        }
        if($("#modal-content").css("right") == "0px"){
            $("#modal-content").css("width",modal_width);

        }else{
            $("#modal-content").css("width",modal_width);
            $("#modal-content").css("right",-(modal_width));
        }
    }

    <!-- 百度地图-->
    var map = new BMap.Map("allmap");//创建地图实例
    var point = new BMap.Point(113.560305,22.229004);//坐标经纬度
    var sContent = "<form id='scontent' action='order_info.html' method='post'>" +
                "<div class='row'>" +
                    "<div class='col-xs-4'>" +
                    "<img src='../Public/img/temp.jpg'>" +
                    "</div>" +
                    "<div class='col-xs-8' style='padding-left: 0;padding-right: 10px;'>" +
                    "<p style='font-size: 1.2em;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;'>迎宾广场停车场</p>" +
                    "<p style='font-size: 0.8em;'>地点：珠海市香洲区迎宾南路1144号</p>" +
                    "<p style='font-size: 0.8em;'>价格：5元/时 | 剩余128个车位</p>" +
                    "</div>" +
                "</div>" +
                "<button class='btn' type='submit' style='font-size: 0.8em;'>立即预约</button>" +
            "</form>";
    var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
    var marker = new BMap.Marker(point);  // 创建标注
    map.centerAndZoom(point, 100);//初始化地图
    map.addOverlay(marker);               // 将标注添加到地图中
    marker.openInfoWindow(infoWindow);//默认打开
    map.addControl(new BMap.GeolocationControl());//添加定位控件
    marker.addEventListener("click", function(){
        this.openInfoWindow(infoWindow);
        //图片加载完毕重绘infowindow
        $("#scontent>img").onload = function (){
            infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
        }
    });
</script>
</html>
